.x-alert {
	position: fixed;
	left: 0;
	top: 0;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	width: 100%;
	height: 100%;
	z-index: 99996;
	background: rgba(0,34,54,0.2);
	opacity: 0;
	transition: opacity 0.2s ease-out;
	&__inner {
		width: 80%;
		background: #fff;
		box-shadow: 0 0 0.16rem rgba(0,39,61,0.05);
		border-radius: 0.06rem;
		opacity: 0;
		transform-origin: 50%;
	}
	&__body {
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		-webkit-box-orient: vertical;
		padding: 0.80rem 0.50rem 0.50rem 0.50rem;
		h1 {
			display: block;
			margin-bottom: 0.15rem;
			font-size: 0.3rem;
			line-height: 1.5;
		}
		p {
			font-size: 0.28rem;
			line-height: 1.2;
			margin-bottom: 0.20rem;
		}
		input {
			padding: 0.10rem;
			width: 100%;
			line-height: 1.2;
			font-size: 0.30rem;
			background: rgb(230,230,230) !important;
			border-radius: 0.06rem !important;
			border: 1px solid rgb(242,242,242);
			margin-bottom: 0.20rem;
		}
	}
	&__btns {
		border-top: 1px solid rgb(242,242,242);
		display: flex;
		a {
			flex-grow: 1;
			text-align: center;
			line-height: 0.8rem;
			font-size: 0.28rem;
			color: #999;
			&:not(:last-child){
				border-right: 1px solid rgb(242,242,242);
			}
			&.x-alert__btn-y {
				color: #00bb44;
				font-weight: bold;
			}
			&:active {
				background: rgba(0,0,0,0.02);
			}
		}
	}
	&--show {
		opacity: 1;
		.x-alert__inner {
			transform: scale(1,1);
			opacity: 1;
			-webkit-animation: "___x_alert_show" 0.2s ease-out;
			animation: "___x_alert_show" 0.2s ease-out;
		}
		@at-root {
			@-webkit-keyframes "___x_alert_show" {
				0% { transform: scale(1.4,1.4); opacity: 0;}
				75% { transform: scale(0.95,0.95); opacity: 1;}
				100% { transform: scale(1,1); opacity: 1;}
			}
		}
	}
	&--hide {
		opacity: 0;
		transition: opacity 0.15s ease-out;
		.x-alert__inner {
			transform: scale(0.95,0.95);
			transition: all 0.15s ease-out;
		}
	}
}





.dateHelp, .cvv2Help {
	background: rgba(0, 34, 54, 0.6);
	.x-alert__inner {
		width: 6rem;
		box-shadow: none;
		background: none;
		.x-alert__body {
			background: url("../../assets/imgs/bg-card-1.png");
			background-size: 100% 100%;
			width: 6rem;
			height: 6rem;
			padding: 0;
			margin-bottom: 1rem;
			p {
				display: none;
			}
		}
		.x-alert__btns {
			border-top: none;
			display: block;
			width: 1rem;
			height: 1rem;
			margin: 0 auto;
			a {
				display: block;
				width: 1rem;
				height: 1rem;
				text-indent: -99em;
				background: url("../../assets/imgs/icon-close.png");
				background-size: cover;
				&:active {
					opacity: 0.5;
				}
			}
		}
	}
}

.cvv2Help {
	.x-alert__inner {
		.x-alert__body {
			background: url("../../assets/imgs/bg-card-2.png");
			background-size: 100% 100%;
		}
	}
}

.bankHelp {
	.x-alert__inner {
		.x-alert__body {
			padding: 0.3rem 0.5rem;
		}
		ul {
			width: 100%;
		}
		ul li {
			width: 50%;
			float: left;
			font-size: 0.28rem;
			padding: 0.1rem 0.18rem;
			position: relative;
			&:before {
				content: "";
				display: block;
				width: 0.1rem;
				height: 0.1rem;
				background: #00bb44;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 50%;
				-webkit-transform: translate(0,-50%);
			}
		}
	}
}